<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="filterPolygon">Select >= 200</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "FilterPolygon.component",
    components: {Maptalks},
    setup() {


        const filterPolygon = () => {
            layer.value.filter([">=", "count", 200]).forEach(function (feature) {
                feature.updateSymbol([
                    {
                        "polygonFill": "rgb(216,115,149)"
                    }
                ]);
            });
        }

        let layer = ref(null)

        let mapOnLoadCB = (map) => {
            map.setCenter([106.45, 29.23])
            map.setZoom(14)

            layer.value = new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_LAYER).addTo(map)

            // 画图层
            for (let i = 0; i < 3; i++) {
                new maptalks.Polygon([
                    [106.45 + 0.02 * i, 29.23],
                    [106.46 + 0.02 * i, 29.23],
                    [106.46 + 0.02 * i, 29.25],
                    [106.45 + 0.02 * i, 29.25]
                ], {
                    "properties": {
                        "count": (i + 1) * 100
                    },
                    "symbol": [
                        {
                            "polygonFill": "#747474",
                            "polygonOpacity": 0.5,
                            "lineColor": "#000",
                            "lineWidth": 2
                        },
                        {
                            "textName": "{count}",
                            "textSize": 40,
                            "textFill": "#fff"
                        }
                    ]
                }).addTo(layer.value)
            }
        };

        return {
            mapOnLoadCB,
            filterPolygon
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}
</style>
